<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:help
     -->
    <div class="QS-content-template QS-help">

        <el-tabs v-model="tabName" @tab-click="tabClick">
            <el-tab-pane label="常见问题" name="1">
                <div class="help_answ">
                    <h2>你可能会遇到的问题</h2>

                    <div class="foods_console">
                        <el-button @click="addBtnFunc" class="foods_addFoods_btn" type="primary">添加</el-button>
                    </div>
                    <!-- <el-card class="box-card help_card"> -->
                    <div v-for="(item,index) in helpList" :key="index" class="help_card">
                        <div class="help_con">
                            <h3>{{item.problemName}}</h3>
                            <div class="help_des">
                                {{item.answer}}
                            </div>
                        </div>
                        <div class="help_control">
                            <i @click="editHelp(item)" class="el-icon-edit"></i>
                            <i @click="delHelp(item)" class="el-icon-delete"></i>
                        </div>

                    </div>
                    <!-- </el-card> -->
                </div>
            </el-tab-pane>
            <el-tab-pane label="解决方案" name="2">
                <h2>我们早已为您准备好解决方案</h2>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">解决方案</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="solutionVal"
                            placeholder="请输入常见问题"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">方案图片</span>
                    <div class="makeFoods_input">
                        <el-upload
                            class="avatar-uploader uploader_small"
                            :action="$commonFunc.imageAPI()"
                            :show-file-list="false"
                            :on-success="planUrlSuccess"
                            :before-upload="beforeAvatarUpload">
                                <img v-if="planUrl" :src="$commonFunc.checkThePic(planUrl)" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div class="help_plan_b">
                        <el-button @click="plabConfirm" type="primary">提 交</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        


        <el-dialog
            title="添加常见问题"
            :visible.sync="dialogVisible"
            width="70%">
            <div class="mall_add dialog_auto">
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">常见问题</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="problemVal"
                            placeholder="请输入常见问题"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label label_top">
                    <span class="makeFoods_label_tip">问题描述</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="answerVal"
                            placeholder="请输入问题描述"
                            type="textarea"
                            :rows="8"
                            clearable
                        ></el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addProblem">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
	components: {
	
	},
	data(){
		return {
            tabName:'1',
            helpList:[],//问题返回数据
            dialogVisible:false,//dialog flag
            solutionVal:'',//解决方案
            planUrl:'',//方案图片

            problemVal:'',//添加问题 - 问题
            answerVal:'',//添加问题 - 问题描述
            addId:'',//
            addFlag:'N',//
            solutionOption:'solutionOption',
            solutionId:'',
		}
    },
    mounted(){
        
        this.getAllProblem();
        // 获取解决方案信息 - 公共信息池
        this.getAllInfo(0);
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        delHelp(item){//删除问题
            // this.dialogVisible = true;
            this.addId = item.id;
            this.problemVal = '';
            this.answerVal = '';
            this.addFlag = 'Y';
            this.$confirm('是否删除该问题?', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                this.changeItemProblem();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        editHelp(item){//修改问题
            this.dialogVisible = true;
            this.addId = item.id;
            this.problemVal = item.problemName;
            this.answerVal = item.answer;
            this.addFlag = 'N';
        },
        addProblem(){//添加问题确认按钮
            // problemVal:'',//添加问题 - 问题
            // answerVal:'',//添加问题 - 问题描述
            this.changeItemProblem();
        },
        tabClick(tab, event){
            console.log(tab, event);
        },
        beforeAvatarUpload(file) {
            console.log('控制图片格式',file);
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        planUrlSuccess(res, file) {
            this.planUrl = file.response.data.filePath;

        },
        plabConfirm(){//解决方案提交
            // solutionVal:'',//解决方案
            // planUrl:'',//方案图片
            this.saveAllInfo();
        },
        getAllProblem(page){
            this.$fetch("commonProblem/findlist",{
                page:page ? page.toString() : '0',//第几页
                // size:'10',//每页大小
                isDeleted:'N',
            }).then(res=>{
                console.log(res)
                // this.totalNum = Number(res.total);
                this.helpList.splice(0);
                for(var  i = 0;i < res.rows.length;i ++){
                    this.helpList.push(
                        {
                            id:res.rows[i].id,//主键
                            problemName:res.rows[i].problemName,//问题
                            answer:res.rows[i].answer,//回答
                            entity:res.rows[i].entity,//
                            gmtCreate:res.rows[i].gmtCreate,//创建时间
                            gmtModifier:res.rows[i].gmtModifier,//修改时间
                            isDeleted:res.rows[i].isDeleted,//删除FLAG
                        }
                    );
                }

                this.dialogVisible = false;
            })
        },
        changeItemProblem(){
            this.$post("commonProblem/save",{
                id:this.addId,//每页大小
                problemName:this.problemVal,
                answer:this.answerVal,
                isDeleted:this.addFlag,
            }).then(res=>{
                console.log(res)
                this.getAllProblem(0);
            })
        },
        addBtnFunc(){
            this.dialogVisible = true;
            this.addId = '';
            this.problemVal = '';
            this.answerVal = '';
            this.addFlag = 'Y';
        },
        getAllInfo(page){
            this.$fetch("commonInfo/findlist",{
                // userId:sessionStorage.getItem("userId"),
                page:page ? page.toString() : '0',//第几页
                Size:'10',//每页大小
                isDeleted:'N',
                // pictureType:'',//图片类型
                // Sort:'',//排序字段,方式
                // isShow:'',//是否显示  Y或N
            }).then(res=>{
                console.log(res)
                var _li = '';
                for(var i = 0;i < res.rows.length;i ++){
                    if(res.rows[i].infoType == this.solutionOption){
                        this.solutionId = res.rows[i].id;
                        this.solutionVal = res.rows[i].infoDescription;
                        this.planUrl = res.rows[i].pictureAddress;
                        _li = '666'
                        break;
                    }else{
                        this.solutionVal = '';
                        this.planUrl = '';
                        _li = '777'
                    }
                    // this.tableData.push({

                    //     publicName:publicName,//类型名称 - 手动添加
                    //     id:res.rows[i].id || '',//主键
                    //     infoDescription:res.rows[i].infoDescription || '',//描述
                    //     infoType:res.rows[i].infoType || '',//类型
                    //     entity:res.rows[i].entity || '',//
                    //     isDeleted:res.rows[i].isDeleted || '',//是否删除
                    //     isShow:res.rows[i].isShow || '',//是否显示
                    //     gmtCreate:this.$commonFunc.timestampToTime(res.rows[i].gmtCreate) || '',//创建时间
                    //     gmtModifier:this.$commonFunc.timestampToTime(res.rows[i].gmtModifier) || '',//修改时间
                    //     pictureAddress:res.rows[i].pictureAddress || '',//图片地址
                    // });
                }
                console.log('_li===',_li)

                // this.dialogVisible = false;
            })
        },
        saveAllInfo(){
            this.$post("commonInfo/save",{
                // userId:sessionStorage.getItem("userId"),
                id:this.solutionId || '',//主键
                pictureAddress:this.planUrl || '',//图片地址
                infoType:this.solutionOption || '',//类型
                infoDescription:this.solutionVal || '',//图片描述
                isShow:'Y',//是否显示
                isDeleted:'N',//是否删除  Y或N
            }).then(res=>{
                console.log(res)
                const h = this.$createElement;
                if(res.code == 0){
                    this.$notify({
                        title: 'info',
                        message: h('i', { style: 'color: teal'}, '修改解决方案成功')
                    });
                    this.getAllInfo(0);

                }else{
                    this.$notify({
                        title: 'info',
                        message: h('i', { style: 'color: teal'}, '修改解决方案失败，请重新提交')
                    });
                }
            })
        },
    }
}
</script>